<template>
  <div style="padding: 20px">
    <Alert message="悬浮按钮示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件a-float-button-group</div>
        <div>shape：设置按钮形状</div>
      </template>
    </Alert>
    <div class="demoTittle">回到顶部</div>
    <div class="demoTittle2 marginBtm18">使用a-back-top组件</div>
    <a-float-button-group shape="circle" :style="{ right: '94px' }">
      <a-back-top :visibility-height="0">
        <template #icon>
          <ArrowUpOutlined />
        </template>
      </a-back-top>
      <a-back-top type="primary" :visibility-height="0">
        <template #icon>
          <ArrowUpOutlined />
        </template>
      </a-back-top>
    </a-float-button-group>
    <a-float-button-group shape="square">
      <a-float-button>
        <template #icon>
          <PhoneOutlined />
        </template>
      </a-float-button>
      <a-float-button>
        <template #icon>
          <MessageOutlined />
        </template>
      </a-float-button>

      <a-back-top :visibility-height="0">
        <template #icon>
          <ArrowUpOutlined />
        </template>
      </a-back-top>
    </a-float-button-group>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import {
    SmileOutlined,
    ArrowUpOutlined,
    PhoneOutlined,
    MessageOutlined,
  } from '@ant-design/icons-vue';
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }
  :deep(.ant-float-btn-default .ant-float-btn-body:hover) {
    background-color: #ffffff;
    .ant-float-btn-content .ant-float-btn-icon {
      color: #0052d9;
    }
  }
</style>
